import React from 'react';
import './style.css';
// event
import emitter from '../../util/events';
// service
import { getAttributeData } from '../../util/service';
// antd
import { Form, Button, Row, Col, Select, Input, Icon } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;



class AttributeForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        getAttributeData()
            .then(response => {
                this.setState({
                    data: response.Data
                })
            })

        emitter.addListener('addAttribute', (data) => {
            let obj = this.state.data;
            obj.push(data);
            this.setState({
                data: obj
            })
        })
    }

    // 显示modal
    showModal = (e) => {
        let data = JSON.parse(e.target.value);
        emitter.emit('showModal', data);
    }

    removeItem = (e) => {
        let data = this.state.data;
        data.splice(e.target.dataset.index, 1);
        this.setState({
            data: data
        })
    }

    render() {
        const data = this.state.data.map((d, i) => {
            return (<Col span={6} key={i}>
                <FormItem
                    label={<span>{d.Name}{d.Delete && <Icon type="close" data-index={i} onClick={this.removeItem}/>}</span>}>
                    {
                        d.Type === "select" && (
                            <Select
                                mode="combobox"
                                placeholder="请选择(单选)"
                                style={{ width: '100%' }}
                                >
                                {d.Value.map((el, index) => {
                                    return (<Option key={el.id} value={el.label}>{el.label}</Option>)
                                })}
                            </Select>
                        )
                    }
                    {
                        d.Type === "multiple" && (
                            <Select
                                mode="tags"
                                placeholder="请选择(多选)"
                                style={{ width: '100%' }}
                                >
                                {d.Value.map((el, index) => {
                                    return (<Option key={el.id} value={el.label}>{el.label}</Option>)
                                })}
                            </Select>
                        )
                    }
                    {
                        d.Type === "input" && (
                            <Input defaultValue={d.Value}/>
                        )
                    }
                </FormItem>
            </Col>)
        })
        return (
            <div>
                <Button 
                    icon="plus" 
                    value='{"type": "Attribute", "data": 1}' 
                    style={{backgroundColor: '#5cb85c', color: '#fff'}} 
                    onClick={this.showModal}>
                    添加自定义产品属性
                </Button>
                
                <Form>
                    <Row gutter={8} className="AttributeClass">
                        {data}
                    </Row>
                </Form>
                
            </div>
        )
    }
}

export default Form.create()(AttributeForm);